import { createStyles } from 'antd-style';

export const usePageMainSiderStyles = createStyles(({ token }) => {

    return {
        wrapper: {
            '&.ant-layout-sider': {
                background: 'transparent',
            },
            marginRight: '26px',
        },
        menu: {
            background: token.colorBgContainer,
            borderRadius: '16px',
            paddingBlock: '16px',
            position: 'fixed',
            width: '300px',
            '&.ant-menu.ant-menu-root': {
                borderInlineEnd: 'none',
            },
            '.ant-menu-item': {
                '--item-height': '56px',
                fontFamily: 'Inter',
                fontSize: '16px',
                fontWeight: 600,
                color: '#A9B2B9',
                display: 'flex',
                alignItems: 'center',
                height: 'var(--item-height)',
                ':not(:last-child)': {
                    marginBottom: '16px',
                },
                'span:first-child': {
                    fontSize: '24px',
                    display: 'flex',
                    justifyContent: 'center',
                    alignItems: 'center',
                    width: 'var(--item-height)',
                    height: 'var(--item-height)',
                    borderRadius: '32px',
                },
                'span:last-child': {
                    marginLeft: '16px',
                },
                '&.ant-menu-item-selected': {
                    background: 'transparent',
                    span: {
                        '&.anticon': {
                            color: '#fff',
                        },
                        '&.ant-menu-title-content': {
                            color: token.colorText,
                        },
                    },
                    'span:first-child': {
                        background: 'linear-gradient(248.85deg, #2C9108 -1.77%, #AFD83C 104.39%)',
                    },
                },
            },
        },
        menuMobile: {
            position: 'fixed',
            bottom: '50px',
            left: 0,
            right: 0,
            zIndex: 1,
            paddingInline: 'var(--content-inline-padding)',
            ul: {
                '&.ant-menu': {
                    '&.ant-menu-root': {
                        background: token.siderBackground,
                        borderInlineEnd: 'none',
                        border: `1px solid ${token.colorBorder}`,
                    },
                    position: 'relative',
                    width: '100%',
                    flexDirection: 'row',
                    height: '72px',
                    display: 'flex',
                    alignItems: 'center',
                    padding: '8px 48px 8px 48px',
                    borderRadius: '40px',
                    justifyContent: 'space-between',
                    '::before': {
                        display: 'none',
                    },
                    '::after': {
                        display: 'none',
                    },
                },
                '.ant-menu-item': {
                    width: 'var(--item-height)',
                    marginInline: 0,
                    marginBlock: 0,
                    paddingInline: 0,
                    ':not(:last-child)': {
                        marginBottom: 0,
                    },
                    'span:last-child': {
                        display: 'none',
                    },
                },
            },
        },
    };
});